<template>
  <div class="difficultcases">
    <div>
      <van-nav-bar title="专家问诊" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    </div>
    <div style="position: relative">
      <van-search
        v-model="searchValue"
        show-action
        placeholder="请输入搜索关键词"
        @click="onClickButton"
        shape="round"
      >
        <template #action>
          <div class="search">搜索</div>
        </template>
      </van-search>
    </div>
    <div>
      <van-tabs>
        <van-tab v-for="(item, index) in tabbarlist" :key="index" :title="item.title">
          <div>
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1" @change="km"/>
              <van-dropdown-item v-model="value2" :options="option2" @change="keshi" />
              <van-dropdown-item v-model="value3" :options="option3" @change="sortPrice" />
              <van-dropdown-item v-model="value4" :options="option4" @change="shaixuan">
              </van-dropdown-item>
            </van-dropdown-menu>
          </div>

          <div v-if="item.title == `${item.title}`">
            <van-list
              @load="load"
              :loading="loading"
              finished-text="数据没有了"
              :finished="finished"
              class="tabList"
            >
              <div class="tabs">
                <div v-for="(v, i) in tabbarlistChild" :key="i">
                  <div v-if="v.department == `${item.title}`" class="tabList-item">
                    <img v-lazy="v.image" style="width: 100%" alt="" @click="toDetail(v)" />
                    <div class="title">{{ v.title }}</div>
                    <div>{{ v.name }} {{ v.doctor }}</div>
                    <div>{{ v.department }}</div>
                    <div>
                      <span style="color: red">￥</span
                      ><span style="font-size: 20px; color: red; font-weight: bold">
                        {{ v.price }}</span
                      >
                      <span style="color: red">起</span>
                    </div>
                  </div>
                  <div v-if="item.title == '全部'" class="tabList-item">
                    <img v-lazy="v.image" style="width: 100%" alt="" @click="toDetail(v)" />
                    <div class="title">{{ v.title }}</div>
                    <div>{{ v.name }} {{ v.doctor }}</div>
                    <div>{{ v.department }}</div>
                    <div>
                      <span style="color: red">￥</span
                      ><span style="font-size: 20px; color: red; font-weight: bold">{{
                        v.price
                      }}</span>
                      <span style="color: red">起</span>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import { useRouter } from 'vue-router'
import axios from '../../utils/request'
import 'vue-waterfall-plugin-next/dist/style.css'
import { reactive } from 'vue'
const router = useRouter()

const searchValue = ref<string>('') // 搜索框的值
const defaultContents = ref<string[]>(['专家问诊', '健康VIP', '一病多问']) // 默认内容数组
let currentIndex = ref<number>(0) // 当前索引
let intervalId: ReturnType<typeof setInterval> // 定时器的 ID

// 切换默认内容的函数
const switchContent = () => {
  currentIndex.value = (currentIndex.value + 1) % defaultContents.value.length
  searchValue.value = defaultContents.value[currentIndex.value]
}

// 组件挂载时设置定时器
onMounted(() => {
  searchValue.value = defaultContents.value[currentIndex.value] // 设置初始值
  intervalId = setInterval(switchContent, 1500) // 每 1.5秒切换一次
})

// 组件卸载时清除定时器
onBeforeUnmount(() => {
  clearInterval(intervalId)
})
// 跳转搜索
const onClickButton = () => {
  router.push('/search')
}

// 获取后端接口数据
const list: any = ref([])
const GetList = async () => {
  const res = await axios.get('/api/v1/menu')
  list.value = res.data.data
}
GetList()

// 获取后端列表数据
const tabbarlist: any = ref([])
const GetTabbar = async () => {
  const res = await axios.get('/api/v1/tabtitle')
  tabbarlist.value = res.data.data
}
GetTabbar()

const loading = ref(false)
const finished = ref(false)
// 页码
const config = reactive({
  currentPage: 1,
  pageSize: 30
})
const tabbarlistChild: any = ref([])
const GetTabbarChild = async () => {
  const res = await axios.get('/api/v1/tab')
  console.log(res.data.data)
  // tabbarlistChild.value = res.data.data
  setTimeout(() => {
    tabbarlistChild.value = res.data.data.slice(0, config.currentPage * config.pageSize)
    loading.value = false
    finished.value = tabbarlistChild.value.length >= res.data.data.length
  }, 1500)
}
GetTabbarChild()

// 按照···排序
const sortPrice = () => {
  console.log(1)
  if (value3.value == 9) {
    tabbarlistChild.value.sort((a: any, b: any) => a.price - b.price)
  } else if (value3.value == 10) {
    tabbarlistChild.value.sort((a: any, b: any) => b.price - a.price)
  } else if (value3.value == 6) {
    GetTabbarChild()
  } else if (value3.value == 7) {
    tabbarlistChild.value.sort((a: any, b: any) => b.patient - a.patient)
  }
}
// 筛选三甲
const shaixuan = () => {
  if (value4.value == 'b') {
    tabbarlistChild.value = tabbarlistChild.value.filter((item: any) => item.wound == '三级')
  }

}
// 距离 排序
const km=()=>{
if(value1.value==1){
    tabbarlistChild.value.sort((a: any, b: any) => a.km - b.km)
    // 离我最近排序
  }else if(value1.value==2){
    // 患者评论数排序
     tabbarlistChild.value.sort((a: any, b: any) => a.patient - b.patient)
  }else if(value1.value==0){
    GetTabbarChild()
  }
}
// 科室筛选
const keshi=()=>{
  if(value2.value==3){
    tabbarlistChild.value = tabbarlistChild.value.filter((item: any) => item.department == '耳鼻咽喉科')
  }else if(value2.value==4){
    tabbarlistChild.value = tabbarlistChild.value.filter((item: any) => item.department == '精神科')
  }else if(value2.value==5){
    tabbarlistChild.value = tabbarlistChild.value.filter((item: any) => item.department == '乳腺外科')
  }else if(value2.value==11){
    GetTabbarChild()
  }
}

// 触底事件
const load = () => {
  config.currentPage++
  loading.value = true
  GetTabbarChild()
}
// 患者跳转详情1
const toDetail = async (v: any) => {
  router.push({
    path: `/detail/${v.id}`
  })
}
const value1 = ref(0)
const value2 = ref(3)
const value3 = ref(6)
const value4 = ref('a')
const option1 = [
  { text: '全国', value: 0 },
  { text: '离我最近', value: 1 },
  { text: '患者评论数', value: 2 }
]
const option2 = [
  {text:"默认",value:11},
  { text: "耳鼻咽喉科", value: 3 },
  { text: "精神科", value: 4 },
  { text: '乳腺外科', value: 5 }
]
const option3 = [
  { text: '综合排序', value: 6 },
  { text: '问诊量', value: 7 },
  { text: '价格从低到高', value: 9 },
  { text: '价格从高到底', value: 10 }
]
// 排序

const option4 = [
  { text: '筛选', value: 'a' },
  { text: '医院等级', value: 'b' },
  { text: '问诊类型', value: 'c' },
  { text: '医生职称', value: 'd' }
]

console.log(tabbarlistChild.value.name)
console.log(value3)
// 切换排序
onMounted(() => {
  intervalId = setInterval(switchContent, 1500) // 每 1.5秒切换一次
})
</script>
<style lang="scss" scoped>
.tabs {
  column-count: 2;
}
.tabList {
  width: 100%;
  .tabList-item {
    // 让元素强制在一列显示
    break-inside: avoid;
    margin-top: 30px;
    width: 160px;
    margin: 10px 12px;
    font-size: 15px;
    .title {
      font-weight: 600;
    }
  }
}
.tabList-items {
  display: flex;
  column-count: 2;
}
</style>